import React from 'react';
import {
  Modal,
  Form,
  Descriptions,
  Button,
  Timeline,
  Input,
  Select,
} from 'antd';
const { TextArea } = Input;
import UploadList from '@/components/UploadList';
import FileList from '@/components/FileLists';
import { componentsMap } from '@/utils/util';
import { useEffect, useState } from 'react';
import API from '@/api/xjindex';
import { connect } from 'umi';
import moment from 'moment';

const CreateModal = ({ history }) => {
  const [form] = Form.useForm();
  const [alarmTitle, setAlarmTitle] = useState('');
  const [initList, setInitList] = useState({});
  const [disposalList, setDisposalList] = useState([]);
  const [spectList, setSpectList] = useState({});
  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  //   const formTailLayout = {
  //     labelCol: {
  //       span: 6,
  //     },
  //     wrapperCol: {
  //       span: 8,
  //       offset: 8,
  //     },
  //   };

  const [descriptData] = useState([
    {
      label: '告警等级',
      name: 'alarmLevel',
    },
    {
      label: '检测时长',
      name: 'detectionDuration',
    },
    {
      label: '攻击者组',
      name: 'sourceAddress',
    },
    {
      label: '受害者组',
      name: 'destinationAddress',
    },
    {
      label: '确认状态',
      name: 'readState',
    },
    {
      label: '处置状态',
      name: 'disposeState',
    },
  ]);

  const [descriptTableData] = useState([
    {
      label: '告警id',
      name: 'alarmId',
    },
    {
      label: '告警名称',
      name: 'alarmTitle',
    },
    {
      label: '告警内容',
      name: 'alarmContent',
    },
    {
      label: '告警等级',
      name: 'alarmLevel',
    },
    {
      label: '告警类型',
      name: 'alarmType',
    },
    {
      label: '告警次数',
      name: 'alarmNum',
    },
    {
      label: '域名',
      name: 'areaName',
    },
    {
      label: '攻击方向',
      name: 'directionDirection',
    },
    {
      label: '攻击者组',
      name: 'sourceAddress',
    },
    {
      label: '受害者组',
      name: 'destinationAddress',
    },
    {
      label: '告警处置建议',
      name: 'alarmDispose',
    },
  ]);

  const [spectData] = useState([
    {
      label: '处置人',
      name: 'disposalName',
    },
    {
      label: '联系方式',
      name: 'disposalPhone',
    },
    {
      label: '处置结果',
      name: 'disposeState',
    },
    {
      label: '处置说明',
      name: 'alarmDispose',
    },
  ]);

  const stateMap = {
    0: {
      text: '提醒',
    },
    1: {
      text: '警告',
    },
    2: {
      text: '严重',
    },
    3: {
      text: '等级',
    },
  };
  const initDetails = () => {
    API.showAlarm(history.location.query).then((res) => {
      if (res) {
        if (res.t.disposeState == '0') {
          res.t.disposeState = '未处置';
        } else if (res.t.disposeState == '1') {
          res.t.disposeState = '已处置';
        } else {
          res.t.disposeState = '忽略';
        }
        setInitList({
          ...res.t,
          readState: res.t.readState === '0' ? '未读' : '已读',
          alarmLevel: stateMap[res.t.alarmLevel].text,
          createTime: moment(res.t.createTime).format('YYYY-MM-DD'),
        });
        setAlarmTitle(res.t.alarmTitle);
        setDisposalList(res.t.alarmDisposalList);
        form.setFieldsValue({
          ...res.t.alarmDisposalList[0],
        });
        setSpectList({
          ...res.t.alarmDisposalList[0],
          disposeState:
            res.t.alarmDisposalList[0].disposeState === 1 ? '已处置' : '忽略',
        });
      }
    });
  };
  useEffect(() => {
    form.resetFields();
    initDetails();
  }, []);

  return (
    <div>
      <div className="wrap_descript">
        <div className="descript_div">
          <span>
            {initList.threatScore}
            {/* 100 */}
          </span>
          <span>分</span>
        </div>
        <div className="descript_main">
          <Descriptions title={`检测到代码执行攻击：${alarmTitle}`}>
            {descriptData.map((item) => {
              //获取数据的
              return (
                <Descriptions.Item label={item.label} key={item.name}>
                  {initList[item.name]}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
        </div>
      </div>
      <div className="warp_steptable">
        <div className="warp_step">
          <div className="first_time">
            <div className="time_content">
              <div>告警时间</div>
              <span>{initList.createTime}</span>
            </div>
            <div className="timeline_marker"></div>
          </div>
          {initList.disposeState == '1' ? (
            <div className="last_time">
              <div className="time_content_blue">
                <div>处置时间</div>
                <span>{initList.alarmTime}</span>
              </div>
              <div className="timeline_marker_blue"></div>
            </div>
          ) : (
            ''
          )}
        </div>
        <div className="wrap_table">
          <Descriptions
            title={`检测到代码执行攻击：${alarmTitle}`}
            bordered
            column={{
              xxl: 2,
              xl: 2,
              lg: 2,
              md: 2,
              sm: 2,
              xs: 1,
            }}
          >
            {descriptTableData.map((item) => {
              //获取数据的
              return (
                <Descriptions.Item label={item.label} key={item.name}>
                  {initList[item.name]}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
          {initList.disposeState == '1' ? (
            <div className="wrap_form">
              <Descriptions title={`处置情况`}>
                {spectData.map((item) => {
                  //获取数据的
                  return (
                    <Descriptions.Item label={item.label} key={item.name}>
                      {spectList[item.name]}
                    </Descriptions.Item>
                  );
                })}
                <Form.Item
                  {...formItemLayout}
                  label="附件信息"
                  // extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
                  name="file"
                  className="block"
                >
                  <FileList
                    downloadUrl="/alarm/download"
                    options={uploadOptions}
                    // defaultFiles={fileList}
                  ></FileList>
                </Form.Item>
              </Descriptions>
            </div>
          ) : (
            ''
          )}
        </div>
      </div>
    </div>
  );
};

export default connect(({ dict }) => ({
  orgOptions: dict.orgOptions,
}))(CreateModal);

// export default CreateModal
